/* 全局布局 */
.xm-border-box{
	box-sizing: border-box;
}

/* 横向 */
.xm-flex-r{
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
}
.xm-flex-rr{
	display: flex;
	flex-direction: row-reverse;
	box-sizing: border-box;
}
/* 竖向 */
.xm-flex-c{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.xm-flex-cr{
	display: flex;
	flex-direction: column-reverse;
	box-sizing: border-box;
}
/* 水平布局 */
.xm-justify-start{
	justify-content: flex-start;
}
.xm-justify-end{
	justify-content: flex-end;
}
.xm-justify-center{
	justify-content: center;
}
.xm-justify-between{
	justify-content: space-between;
}
.xm-justify-around{
	justify-content: space-around;
}
/* 垂直布局 */
.xm-align-around{
	align-items: flex-start;
}
.xm-align-end{
	align-items: flex-end;
}
.xm-align-baseline{
	align-items: baseline;
}
.xm-align-stretch{
	align-items: stretch;
}
/* 是否换行 */
.xm-flex-wrap{
	flex-wrap: wrap;
}
.xm-flex-nowrap{
	flex-wrap: nowrap;
}
.xm-flex-wrap-r{
	flex-wrap:  wrap-reverse;
}

/* item布局 */
.xm-align-content-center {
	align-content: center;
}
.xm-align-content-end{
	align-content: flex-end;
}
.xm-align-content-around{
	align-content: space-around;
}
.xm-align-content-between{
	align-content: space-between;
}

/* 盒子模型 */
.xm-padding-10r{
	padding: 10rpx;
}
.xm-padding-20r{
	padding: 20rpx;
}
.xm-padding-15r{
	padding: 15rpx;
}
.xm-padding-30r{
	padding: 30rpx;
}
.xm-margin-auto{
	margin: auto;
}
.xm-margin-10rpx{
	margin: 10rpx;
}
.xm-margin-15rpx{
	margin: 15rpx;
}
.xm-margin-20rpx{
	margin: 20rpx;
}
.xm-margin-30rpx{
	margin: 30rpx;
}
.xm-padding-top-none{
	padding-top: initial;
}
.xm-padding-bottem-none{
	padding-top: initial;
}
.xm-padding-left-none{
	padding-top: initial;
}
.xm-padding-right-none{
	padding-top: initial;
}


/* 字体大小 */
.xm-fontsize-30{
	font-size: 30rpx;
}
.xm-fontsize-25{
	font-size: 25rpx;
}
.xm-fontsize-20{
	font-size: 20rpx;
}
.xm-fontsize-15{
	font-size: 15rpx;
}


/* 常用颜色 */
.xm-black{
	color: #000000;
}
.xm-jb-200{
	background: linear-gradient(to right,#dac2df,#c0d2d8);
}
.xm-jb-201{
	background: linear-gradient(to right,#d8b0df,#a4cfd8);
}

.xm-color-200{
	color: #6f8fd3;
}



/* 网格布局 */
.xm-grid{
	display: grid;
	/* margin: auto; */
}
.xm-grid-c5-auto{
	display: grid;
	grid-template-columns:auto auto auto auto auto;
}
.xm-grid-c5fr{
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}
.xm-grid-c4fr{
	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
}
.xm-grid-c3-auto{
	display: grid;
	grid-template-columns:auto auto auto;
}
.xm-grid-c2fr{
	display: grid;
	grid-template-columns:1fr 1fr;
}
.xm-grid-g30{
	grid-gap:30rpx;
}

/* 边框和圆角 */
.xm-brr-20rpx{
	border-radius: 20rpx;
}


/* 按钮点击特效 */
.but-selct{
	background:linear-gradient(to right,#d6d6d6,#26acd4);
}